//================ DOM methods ============

// Fix getComputedStyle method for IE model
if (!("getComputedStyle" in window))
{
    window.getComputedStyle = function (e)
    {
        return e.currentStyle;
    }
}

//================ Utility methods ============
var log = function()
{
    if (typeof console == "object" && console.log)
    {
        console.log.apply(console, arguments);
    }
}

getOffsetTop = function (element)
{
    var offset = 0;
    while (element !== null)
    {
        offset += element.offsetTop;
        element = element.offsetParent;
    }
    return offset;
}

getOffsetLeft = function (element)
{
    var offset = 0;
    while (element !== null)
    {
        offset += element.offsetLeft;
        element = element.offsetParent;
    }
    return offset;
}

//================ MenuBar methods ============

var MenuBar = function( menuId )
{
    this.$menuBar = $(menuId);
    this.$menuBarItems      = this.$menuBar.find("a");
    
    var $lastMenuBarItem    = this.$menuBarItems.slice(-1);
    var menuBarItemsCount   = this.$menuBarItems.size();

    log("menuBarItemsCount =  ", menuBarItemsCount);
    if (menuBarItemsCount == 0)
        return;

    // Cross browser function for retrieving global/external CSS properties:
    // object.getComputedStyle (element, pseudoElementName);
    // Returns a CSSStyleDeclaration object that represents the computed style for the current element.
    var domLastMenuBarItem = $lastMenuBarItem.get(0);
    var domLastMenuBarStyle = getComputedStyle(domLastMenuBarItem, "");
    $lastMenuBarItem.css("borderRightWidth", domLastMenuBarStyle.borderLeftWidth);
    $lastMenuBarItem.css("borderRightColor", domLastMenuBarStyle.borderLeftColor);
    $lastMenuBarItem.css("borderRightStyle", domLastMenuBarStyle.borderLeftStyle);

    var $menuBarItem;
    var $popupMenu, popupMenuName;
    var $popupMenuItems, $popupMenuItem;

    for (var menuBarItemIndex = 0; menuBarItemIndex < menuBarItemsCount ; ++menuBarItemIndex)
    {
        if (menuBarItemIndex < menuBarItemsCount - 1)
            $menuBarItem = this.$menuBarItems.slice(menuBarItemIndex, menuBarItemIndex + 1);
        else
            $menuBarItem = this.$menuBarItems.slice(menuBarItemIndex);

        $menuBarItem.mouseover(this.highlight($menuBarItem));
        $menuBarItem.mouseout(this.normal($menuBarItem));

        popupMenuName = $menuBarItem.attr("menu");
        log("typeof popupMenuName =  ", typeof popupMenuName);
        if (popupMenuName)
        {
            log("popupMenuName =  ", popupMenuName);
            $popupMenu = $( "#" + popupMenuName );
            if ($popupMenu && $popupMenu.is("div"))
            {
                log("$popupMenu is a div");
                $popupMenuItems = $popupMenu.find("li");
                
                var popupMenuItemsCount = $popupMenuItems.size();
                log("dropMenuItemsCount = ", popupMenuItemsCount);
                if (popupMenuItemsCount > 0)
                {
                    $dropMenuLastItem = $popupMenuItems.slice(-1);
                    $dropMenuLastItem.css("borderBottom", "none");

                    popupMenuItemsCount = $popupMenuItems.size();
                    log("dropMenuItemsCount = ", popupMenuItemsCount);

                    for (var itemIndex = 0 ; itemIndex < popupMenuItemsCount ; ++itemIndex)
                    {
                        if (itemIndex < popupMenuItemsCount - 1)
                            $popupMenuItem = $popupMenuItems.slice(itemIndex, itemIndex + 1);
                        else
                            $popupMenuItem = $popupMenuItems.slice(itemIndex);

                        $popupMenuItem.mouseover(this.highlight($popupMenuItem));
                        $popupMenuItem.mouseout(this.normal($popupMenuItem));
                    }

                    $popupMenu.css("visibility", "hidden");
                    $popupMenu.css("position", "absolute");
                }

                $menuBarItem.mouseover(this.showMenu($popupMenu, $menuBarItem));
                $popupMenu.mouseover(this.showMenu($popupMenu, $menuBarItem));

                $menuBarItem.mouseout(this.hideMenu(500));
                $popupMenu.mouseout(this.hideMenu(500));
            }
            else
            {
                log("$dropMenu is not a div");
                // TODO : hide the menu bar item
            }
        }
        else
        {
            log("dropMenuName attribute is missing on menubar item");
            // TODO : hide the menu bar item
        }
    }
}
MenuBar.prototype.highlight = function(element)
{
    return function()
    {
        element.addClass("highlight");
    }
}

MenuBar.prototype.normal = function(element)
{
    return function()
    {
       element.removeClass("highlight");
    }
}

MenuBar.prototype.showMenu = function($menu, $link)
{
    var that = this;
    var menu = $menu.get(0);
    var link = $link.get(0);

    return function()
    {
        if (that.hideTimer)
        {
            clearTimeout(that.hideTimer);
            delete that.hideTimer;
        }

        if (that.visibleMenu)
        {
            that.visibleMenu.style.visibility = "hidden";
            delete that.visibleMenu;
        }

        // Explanation for getOffsetTop, getOffsetLeft in http://www.quirksmode.org/js/findpos.html
        var offsetLeft = getOffsetLeft(link);
        var offsetTop = getOffsetTop(link);

        // offsetHeight returns the height of the visible area for an object, in pixels.
        // The value contains the height with the padding, scrollBar, and the border,
        // but does not include the margin.
        offsetTop += link.offsetHeight;

        /*
        if (link.offsetParent.tagName != "BODY")
        {
            offsetTop += 1;
            offsetLeft += 2;
        }
        */

        menu.style.top = offsetTop + "px";
        menu.style.left = offsetLeft + "px";

        that.visibleMenu = menu;
        menu.style.visibility = "visible";
    }
}

MenuBar.prototype.hideMenu = function(milliseconds)
{
    var that = this;
    return function()
    {
        if (typeof milliseconds === "undefined")
            milliseconds = 0;

        that.hideTimer = setTimeout(that.doHideMenu(), milliseconds);
    }
}

MenuBar.prototype.doHideMenu = function()
{
    var that = this;
    return function()
    {
        if (that.hideTimer)
        {
            clearTimeout(that.hideTimer);
            delete that.hideTimer;
        }

        if (that.visibleMenu)
        {
            that.visibleMenu.style.visibility = "hidden";
            delete that.visibleMenu;
        }
    }
}

// ========= page methods ===========================

var menuBar;

$(
    function()
    {
        menuBar = new MenuBar("#menubar");
    }
)